<template>
  <div class="bg" @mousemove="mousemove">
    <div class="album" ref="albumbox">
      <img
        v-for="(item, i) in photos"
        :src="item.img"
        :key="i"
        alt=""
        @click="change($event)"
        class="ph"
      />
      <!-- <img src="../assets/img/pics01.jpg" alt="" class="ph"> -->
    </div>
    <div class="sh">
      <img
        src="../assets/img/pics05.jpg"
        alt=""
        class="show"
        @click="change($event)"
      />
    </div>
    <div class="over"></div>
    <img
      class="guoba"
      :style="guobasd"
      @mousemove="g"
      src="../assets/img/guoba.png"
      alt=""
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      mx: 0,
      my: 0,
      photos: [],
    };
  },
  created() {
    this.getimg();
  },
  mounted() {
    this.setZ();
  },
  computed: {
    guobasd() {
      let sx = (this.mx - 1300) / 30;
      let sy = (650 - this.my) / 30;
      let blur = Math.sqrt(sx ** 2 + sy ** 2) / 1.5;
      let color = "rgb(0,0,0)";
      return `filter: drop-shadow(${sx}px ${sy}px ${blur}px ${color});`;
    },
  },
  methods: {
    getimg() {
      for (let index = 0; index < 4; index++) {
        let a = { img: require(`../assets/img/pics0${index + 1}.jpg`) };
        this.photos.push(a);
      }
      /* let a = this.$refs.albumbox;
      for (let index = 0; index < 4; index++) {
        let img = document.createElement("img");
        img.setAttribute("src", this.photos[index].img);
        img.addEventListener('onclick',this.change(this));
        a.appendChild(img);
      }
      console.log(a.children); */
    },
    g(e) {
      this.mx = e.clientX;
      this.my = e.clientY;
    },
    mousemove(e) {
      this.mx = e.offsetX;
      this.my = e.offsetY;
    },
    setZ() {
      let array = this.$refs.albumbox.children;
      for (let index = 0; index < array.length; index++) {
        const element = array[index];
        element.style.transform = `translateZ(-${index * 40}px) translateX(-${
          index * 20
        }px) translateY(-${index * 10}px) `;
        //element.click=this.photoonclick
      }
    },
    change(e) {
      let s = document.querySelector(".show");
      let b = document.querySelector(".sh");
      let al = document.querySelector(".album");
      let x = e.currentTarget;
      let sty = x.style.transform;
      let cla = x.classList;
      s.classList = cla;
      s.style.transform = sty;
      al.appendChild(s);
      x.classList = "show";
      x.style.transform = "";
      b.appendChild(x);
      b.removeChild(s);
    },
  },
};
</script>

<style>
.bg {
  width: 100%;
  height: 100vh;
  background-image: url(../assets/img/background.png);
  background-size: cover;
  background-position-y: -80px;
}
.guoba {
  position: fixed;
  width: 200px;
  transform: rotateY(180deg) translateY(-100%);
  left: 1200px;
  top: 100%;
  /* filter: drop-shadow(100px 20px 40px rgb(0,0,0)); */
}
.album {
  width: 600px;
  position: absolute;
  /* left: 350px;
  top: 450px; */
  left: 200px;
  top: 350px;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(45deg);
}
 .over{
    position: absolute;
    width: 650px;
    height: 400px;
    background-color: transparent;
    left: 850px;
    top: 100px;
} 
.ph {
  width: 60%;
  position: absolute;
  transition: 0.2s ease;
  box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.7);
  filter: grayscale(60%);
  border-radius: 5%;
}
.ph:hover {
  width: 65%;
  box-shadow: 0px 0px 20px rgba(140, 232, 255, 0.7);
  filter: grayscale(0%) brightness(110%);
  cursor: pointer;
}
.show {
  position: absolute;
  left: 900px;
  top: 180px;
  width: 500px;
  border-radius: 5%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
  transition: 0.5s ease;
    transform:rotateY(-10deg);
    transform-origin: left;
    -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}
.show:hover {
  transform: scale(1.6) translate(-10%,50%);
  box-shadow: 0px 10px 20px rgba(105, 245, 255, 0.5);
  top: 50%;
  left: 50%;
  -webkit-box-reflect:unset;
}
.sh {
  transform-style: preserve-3d;
  perspective: 900px;
}
/* .over{
    position: absolute;
    width: 600px;
    height: 400px;
    background-color: transparent;
    left: 850px;
    top: 100px;
} */
.zhe{
  width: 200px;
  position: absolute;
  left: 950px;
  top: 480px;
  padding: 10px 10px;
  border-radius: 20px;
  background-color: rgba(255,255,255,0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  filter: blur(1);
}
</style>